<template>
  <div class="qwe">
    <div class="ww">
      <div>最近搜索</div>
      <div @click="shanchu">全部删除</div>
    </div>
    <!-- 渲染 -->
    <div class="o" v-for="(item, index) in list" :key="index">
      <div
        :class="{ active: gaoliang === index }"
        @mouseover="yiru(index)"
        @mouseleave="mouseleave"
      >
        <a href="#" onclick="onname(item.name)">{{ item.name }}</a>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, provide } from "vue";
import axios from "axios";
let list = ref([]);
let gaoliang = ref("");
// 使用provide配置项注入数据 key - value
// provide("name", name);
function onname(name){
  console.log(1);
}
function jiekou() {
  axios.get("http://localhost:3000/data").then((res) => {
    list.value = res.data;
  });
}
// 生命周期函数
onMounted(() => {
  jiekou();
});

function yiru(index) {
  gaoliang.value = index;
}

function mouseleave() {
  gaoliang.value = "";
}

function shanchu() {
  console.log(1);
}
</script>

<style scoped>
.qwe {
  width: 423px;
  /* height: 300px; */
  /* display: block; */
  padding: 5px;
}
.o {
  padding: 6px;
}
.ww {
  display: flex;
  justify-content: space-between;
}
a {
  font-size: 4px;
}
.active {
  padding: 6px;
  background-color: #f8f5f0;
}
</style>
   